import { BaseElement } from '@knno/jsx';
import {
	PopupPosition,
	knnoButton,
	Popup,
	ButtonPrimary,
	PopMenu,
	Dialog,
	vars,
	Selector,
	Button,
	PopList,
	ColorPicker,
	DatePicker,
	Select,
} from '../imports';

import SVGIdea from '../idea.svg';

type PopProps = {
	position?: PopupPosition;
};

const DATA = [
	{
		text: '数据1',
		value: 1,
		desc: '数据1描述',
		children: [
			{
				text: '数据1-1',
				value: 11,
				desc: '数据1-1描述',
			},
			{
				text: '数据1-2',
				value: 12,
				desc: '数据1-2描述',
				children: [
					{
						text: '数据1-2-1',
						desc: '数据1-2-1描述',
						value: 121,
					},
					{
						text: '数据1-2-2',
						desc: '数据1-2-2描述',
						value: 122,
					},
				],
			},
		],
	},
	{
		text: '数据2',
		value: 2,
		desc: '数据2描述',
	},
	{
		text: '数据3',
		value: 3,
		desc: '数据3描述',
		expand: true,
		children: [
			{
				text: '数据3-1',
				desc: '数据3-1描述',
				value: 31,
			},
			{
				text: '数据3-2',
				desc: '数据3-2描述',
				value: 32,
				children: [
					{
						text: '数据3-2-1',
						desc: '数据3-2-1描述',
						value: 321,
					},
					{
						text: '数据3-2-2',
						desc: '数据3-2-2描述',
						value: 322,
					},
				],
			},
		],
	},
];

const MENU = [
	{
		value: 'menu1',
		text: '菜单1菜单1菜单1',
		icon: SVGIdea,
	},
	{
		value: 'menu2',
		text: '菜单2',
	},
	{
		value: 'menuDis',
		text: '菜单禁用',
		children: DATA,
	},
	{
		value: 'menu3',
		text: '水平线',
		type: 'line',
	},
	{
		value: 'menuDis',
		text: '菜单禁用',
	},
	{
		value: 'menu3',
		text: '菜单3',
	},
	{
		value: 'menuDis',
		text: '菜单禁用',
		type: 'caption',
	},
	{
		value: 'menu3',
		text: '水平线',
		type: 'line',
	},
	{
		value: 'menuDis',
		text: '菜单禁用',
		disabled: true,
	},
	{
		value: 'menu3',
		text: '菜单3',
	},
];

export function PopBar(props: PopProps) {
	return (
		<div style={{ width: '15em', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
			<h1 style={{ marginTop: 0 }}>Popup</h1>
			<p>This is a popup</p>
			<button
				class={knnoButton}
				onClick={function () {
					Popup.create(<PopBar position={props.position} />).show(this as HTMLElement, props.position);
				}}
			>
				Show popup
			</button>
			<ButtonPrimary
				onClick={function (evt) {
					PopMenu.show(MENU.concat(MENU).concat(MENU), {
						refer: this,
						useAction: true,
						popupPosition: { x: evt.x, y: evt.y },
					}).onSelect((row, path) => {
						console.log(path);
						Dialog.alert(row.value + '');
					});
				}}
			>
				Show popup menu
			</ButtonPrimary>
		</div>
	);
}

export function PopupPage() {
	let selected: unknown[] | undefined;
	let resultDiv: HTMLDivElement;
	return (
		<>
			<div ref={(d) => (resultDiv = d)} style={{ height: '5em', backgroundColor: vars.color.panelBackground }}></div>
			<div style="display:flex;gap:0.3em">
				<button
					class={[knnoButton]}
					onClick={function () {
						Popup.create(<PopBar />).show(this as HTMLElement);
					}}
				>
					Show popup
				</button>
				<button
					class={[knnoButton]}
					onClick={function () {
						Popup.create(<PopBar position="bottom-left" />).show(this as HTMLElement, 'bottom-left');
					}}
				>
					Show popup bottom-left
				</button>
				<button
					class={[knnoButton]}
					onClick={function () {
						const selector = Selector.show((<div>这是一个选择器</div>) as BaseElement, {
							refer: this as HTMLElement,
							popupPosition: 'bottom-left',
							useAction: true,
						})
							.onOK(() => {
								selector.close();
							})
							.onClose(() => {
								selector.close();
							});
					}}
				>
					Show popup bottom-left
				</button>
				<Button
					onClick={function () {
						const handler = PopList.show(DATA, {
							columnOption: { value: 'value', text: 'text', children: 'children', expand: 'expand' },
							returnFullPath: true,
							width: '30em',
							refer: this,
							multiSelect: true,
							useAction: true,
							useSearch: true,
							selected,
							noSelectField: 'children',
							multiSelectType: 'any',
						});
						handler.onSelectMultiple((selection) => {
							selected = selection.map((s) => ({ value: s.value }));
							resultDiv.textContent = JSON.stringify(selection);
							console.log(resultDiv.textContent);
						});
					}}
				>
					弹出多选返回全路径
				</Button>
				<Button
					onClick={function () {
						ColorPicker.show({
							refer: this,
							useAction: true,
							popupPosition: 'bottom-left',
						}).onSelect((color) => {
							this.style.backgroundColor = color;
						});
					}}
				>
					颜色选择
				</Button>
				<Button
					onClick={function () {
						DatePicker.show({
							refer: this,
						});
					}}
					textContent="选择日期"
				/>
			</div>
			<Select />
		</>
	);
}
